<template>
    <div>
        <h1>员工五险一金缴纳基数</h1>
        <el-form :model="formDate" ref="form" :rules="rules" label-width="80px" :inline="true">
            <el-form-item label="员工姓名">
                <el-input v-model="formData.emp"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="loadData">查询</el-button>
                <el-button @click="toInsert" type="primary">新增</el-button>
            </el-form-item>
        </el-form>
        
        <el-table :data="page.records" border stripe @row-click="toUpdate"  
      >
            <el-table-column type="index" width="50" />
            <el-table-column v-for="col in columns"
                :prop="col.id"
                :key="col.id"
                :label="col.label"
                :width="col.width">
            </el-table-column>
            
        </el-table>

        <el-pagination
            @current-change="loadData" 
            v-model:currentPage="page.current" 
            :page-sizes="[2, 4, 6, 8,10]" 
            :page-size="page.size"
            :total="page.total" background>
        </el-pagination>
        <el-dialog
            :destroy-on-close="true"
            :title="title"
            v-model="isVisible"
            width="60%">
            <span></span>
            <template #footer>
            <span>
                <router-view @ref-table="refTable" :data="data"></router-view>
            </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import request from '@/api/request.js'
import router from '@/router'

//判断是否显示弹窗
let isVisible = ref(false)

let title=ref("");

let refTable=()=>{
    isVisible.value = false
    loadData();
}

//新增
let toInsert = (route) => {
    isVisible.value = true
    router.push("/salary/setup/risks/insert")
}
let data = ref({})

//编辑
let toUpdate = (row,route) => {
    data.value = row
    isVisible.value = true
    router.push("/salary/setup/risks/update")
}

const page = ref({
    current: 1,
    size:10,
    total: 0,
    records: []
})
const columns = [
     {id:'emp', label: '员工姓名'},
    {id:'pensionInsuranceUnit', label: '养老保险单位缴纳部分'},
    { id: 'pensionInsuranceIndividual', label: '养老保险个人缴纳部分'},
    { id: 'healthInsuranceUnit', label: '医疗保险单位缴纳部分'},
    {id:'healthInsuranceIndividual',label:"医疗保险个人缴纳部分"},
    {id:'unemploymentInsuranceUnit', label: '失业保险单位缴纳部分'},
    {id:'unemploymentInsuranceIndividual', label: '失业保险个人缴纳部分'},
    {id:'compensationInsuranceUnit',label: '工伤保险单位缴纳部分'},
    {id:'maternityInsuranceUnit',label: '生育保险单位缴纳部分'},
    {id:'housingProvidentUnit',label: '住房公积金单位缴纳部分'},
    {id:'housingProvidentIndividual',label: '住房公积金个人缴纳部分'}
]
let formData = ref({})

let loadData = () => {
    request({
        url: '/salary/setup/risks',
        method: 'get',
        params: {
            current:page.value.current,
            size:page.value.size,
            ...formData.value
        }
    }).then(res => {
        page.value = res.data
        loadDatas()
    })
}
loadData()
let loadDatas = () => {
    // 遍历表格中的每一条记录
    page.value.records.forEach(async (record, index) => {
        try {
            // 假设根据员工ID查询详细信息，这里使用record.emp作为查询参数
            // 请根据实际接口需求调整参数名和接口地址
            const response = await request({
                url: '/into/getByIds',
                method: 'get',
                params: {
                    id: record.emp  // 假设emp字段存储的是员工ID
                }
            });
            
            // 假设接口返回的数据中包含employeeName字段
            if (response.data && response.data.employeeName) {
                // 用查询到的employeeName覆盖原有的emp字段值
                page.value.records[index].emp = response.data.employeeName;
            }
        } catch (error) {
            console.error(`获取员工${record.emp}信息失败:`, error);
        }
    });
}
</script>

<style scoped>

</style>
